<!--
 * @Author: your name
 * @Date: 2021-01-11 11:23:10
 * @LastEditTime: 2021-01-11 14:10:34
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\test\historyAnalysis\historyAnalysis.vue
-->
<template>
    <div class="test-historyAnalysis-box">
        <div class="echarts-box-mian" v-loading='loading'>
            <div class="echarts-header-box" >
                <div>
                    {{$t('test.deviceTest.historyAnalysis')}}
                </div>
                <div>
                    <span :class="chartType==1?'active':''" @click='chartType = 1;deviceTestGetChart()'><i class="iconfont icon-shou"></i>{{$t('report.reportAnalys.js_report_month')}} :{{nowDay}}</span>
                    <span :class="chartType==2?'active':''" @click='chartType = 2;deviceTestGetChart()'><i class="iconfont icon-shou"></i>{{$t('year')}} :{{nowYear}}</span>
                    <span :class="chartType==3?'active':''" @click='chartType = 3;deviceTestGetChart()'><i class="iconfont icon-shou"></i>{{$t('alarm.alarmAnalysis.allYear')}}</span>
                </div>
            </div>
            <div class="echarts-box" id='echartsBox'>
                
            </div>
        </div>
    </div>
</template>

<script>
import moment from 'moment'
export default {
    components: {

    },
    props: {

    },
    data() {
        return {
            month:moment().endOf('month').format('DD'),
            nowDay:moment().format('M'),
            nowYear:moment().format('YYYY'),
            chartType:1,
            echartData:[],
            loading:false,
        };
    },
    computed: {
        dayArr(){
            let arr = []
            let lengthNum = ''
            if(this.chartType == 1){
                lengthNum = this.month
            } else if(this.chartType == 2){
                lengthNum = 12
            }
            for(let i = 0;i<lengthNum;i++){
                arr.push(i+1)
            }
            return arr
        }
    },
    watch: {
        month:{
            handler(nv,ov){
                
            }
        }
    },
    created() {

    },
    mounted() {
        this.deviceTestGetChart()
    },
    methods: {
        async deviceTestGetChart(){
            this.loading = true
            let res = await this.API.deviceTestGetChart({
                chartType:this.chartType
            })
            this.loading = false
            this.echartData = []
            let lengthNum = ''
            if(this.chartType == 1){
                lengthNum = this.month
            } else if(this.chartType == 2){
                lengthNum = 12
            }else if(this.chartType == 3){
                lengthNum = res.length
            }
            for(let i = 0;i<lengthNum;i++){
                let obj = {
                    inverterNum: 0,
                    num: 0,
                    time: i+1
                }
                if(this.chartType == 3){
                    obj.time = res[i].time
                }
                this.echartData.push(obj)
            }
            if(this.chartType != 3){
                res.forEach(item =>{
                    this.echartData[item.time-1] = item
                })
            }else{
                let timeArr = res.map(item=>{return item.time})
                timeArr.sort(function(a, b){return a - b});
                let sortArr = []
                timeArr.forEach(item=>{
                    res.forEach(itemSub=>{
                        if(itemSub.time == item){
                            sortArr.push(itemSub)
                        }
                    })
                })
                this.echartData = sortArr
            }
            this.initEchartBox()
        },
        initEchartBox(){
            let option  = {
                color:['#FDD100', '#6DA719'],
                tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        }
                    },
                grid: {
                    left:'5%',
                    right:'5%',
                    bottom:'15%'
                    },
                legend: {
                        itemWidth: 20,
                        itemHeight: 15,
                        icon: 'circle',
                },
                dataZoom: [
                    {
                        show: true,
                        realtime: true,
                        start: 0,
                        end: 100
                    }
                ],
                yAxis: {},
                xAxis : [
                    {
                    
                        type : 'category',
                        axisTick: {
                                alignWithLabel: true
                        },
                        data: this.chartType !=3? this.dayArr:this.echartData.map(item=>{return item.time})
                    }
                ],
                series:[{
                    name:'模块老化个数',
                    type:'bar',
                    symbolSize: 0,
                    smooth: true,
                    data:this.echartData.map(item=>{return item.num || 0}),
                },{
                    name:'逆变器老化个数',
                    type:'bar',
                    symbolSize: 0,
                    smooth: true,
                    data:this.echartData.map(item=>{return item.inverterNum || 0}),
                }]
            }
            this.$nextTick(()=>{
                let myChart = this.echarts.init(document.getElementById("echartsBox"));
                myChart.setOption(option);
            })
        }
    },
};
</script>

<style  lang="less" scoped>
.test-historyAnalysis-box{
    .echarts-box-mian{
        background-color: #EFEFEF;
        width: 100%;
        padding: 10px
    }
    .echarts-box{
        width: 100%;
        height: 400px;
    }
    .echarts-header-box{
        display: flex;
        justify-content: space-between;
        align-items: center;
        span{
            margin-right: 20px;
            cursor:pointer;
        }
        .active{
            color: #EB6200;
        }
    }
}
</style>
